<template>
    <div class="echarts-one">
        <div class="top">
            <span> 销售统计</span> 
        </div>
        <div class="bottom" id="lineEchart"></div>
    </div>
</template>
<script>
import echarts from 'echarts'
import { getAnalysisApi } from '@/apis/homeApi'
    export default {
        data(){
            return {
                echart : '',
                xAxisData: [],
                yAxisData1: [],
                yAxisData2: []
            }
        },
        async mounted() {
            this.echart = echarts.init(document.getElementById('lineEchart'))
            let res = await getAnalysisApi()
            if(res.code === 200) {
                this.yAxisData1 = res.data.map(it => {
                    return parseInt(Math.abs(it.newAmount))
                })
                this.yAxisData2 = res.data.map(it => {
                    return parseInt(Math.abs(it.oldAmount))
                })
                this.xAxisData = res.data.map(it => {
                    return it.time
                })
            }
            this.draw(this.echart)
        },
        methods: {
            draw(echart){
                let color = [
                    "#8B5CFF",
                    "#00CA69"
                ];

                let xAxisData = this.xAxisData;
                let yAxisData1 = this.yAxisData1;
                let yAxisData2 = this.yAxisData2;

                const hexToRgba = (hex, opacity) => {
                    let rgbaColor = "";
                    let reg = /^#[\da-f]{6}$/i;
                    if (reg.test(hex)) {
                        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                    "0x" + hex.slice(3, 5)
                    )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
                    }
                    return rgbaColor;
                }
                let option = {
                    backgroundColor: '#fff',
                    color: color,
                    legend: {
                    top: 20,
                    
                    },
                    tooltip: {
                        trigger: "axis",
                        formatter: function(params) {
                            let html = '';
                            params.forEach(v => {
                                html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                                ${v.seriesName}2020.${v.name}  
                                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px;margin-left:5px">${v.value}</span>
                                吨`;
                            })
                            return html
                        },
                        extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                        axisPointer: {
                            type: 'shadow',
                            shadowStyle: {
                                color: '#ffffff',
                                shadowColor: 'rgba(225,225,225,1)',
                                shadowBlur: 5
                            }
                        }
                    },
                    grid: {
                        top: 100,
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: "#333"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#D9D9D9"
                            }
                        },
                        data: xAxisData,
                    }],
                    yAxis: [{
                        type: "value",
                        name: '单位（吨）',
                        axisLabel: {
                            textStyle: {
                                color: "#666"
                            }
                        },
                        nameTextStyle: {
                            color: "#666",
                            fontSize: 12,
                            lineHeight: 40
                        },
                        // 分割线
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#E9E9E9"
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    }],
                    series: [{
                        // name: "2018",
                        name: "预测出货量",
                        type: "line",
                        smooth: true,
                        symbolSize: 8,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[0],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[0], 0.5),
                                shadowOffsetY: 8
                            }
                        },
                        symbol: 'circle',//数据交叉点样式
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                            offset: 0,
                                            color: hexToRgba(color[0], 0.3)
                                        },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[0], 0.1)
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: hexToRgba(color[0], 0.1),
                                shadowBlur: 10
                            }
                        },
                        data: yAxisData1
                    }, {
                        name: "实际出货量",
                        type: "line",
                        smooth: true,
                        symbolSize: 8,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[1],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[1], 0.5),
                                shadowOffsetY: 8
                            }
                        },
                        symbol: 'circle',//数据交叉点样式 (实心点)
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                            offset: 0,
                                            color: hexToRgba(color[1], 0.3)
                                        },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[1], 0.1)
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: hexToRgba(color[1], 0.1),
                                shadowBlur: 10
                            }
                        },
                        data: yAxisData2
                    }]
                };
                echart.setOption(option)
            }
        }
    }
</script>
<style lang="less" scoped>
@import '@/style/common.less';
    .echarts-one {
            width: 100%;
            height: 100%;
            background-color: #fff;
            overflow: hidden;
            > .top {
                width: 100%;
                height: 2rem;
                line-height: 2rem;
               > span {
                    display: inline-block;
                    height: 70%;
                    width: 90%;
                    margin-left: 2rem;
                    margin-top: .5rem;
                    padding-left: 1rem;
                    border-left: 4px solid;
                    line-height: 1.4rem;
                    border-left: 6px solid @dc01;
                    font-size: .8rem;
                    font-weight: 700;
               }
            }
            > .bottom {
                width: 100%;
                height: calc(100% - 2rem);
            }
        }
</style>